<template>
	<view class="cart" v-if="showcate" @touchmove.stop.prevent="moveHandle">
		<view class="cview" @click="canclecart">
		</view>
		<view class="bkview">
			<view class="cart_head">
				<text class="shopct">购物车4件</text>
				<view class="cart_del">
					<image src="../static/icon_clear.png" mode="scaleToFill"></image>
					<text>清空购物车</text>
				</view>
			</view>

			<scroll-view scroll-y="true" class="cartscroll" croll-y="true" v-if="vages">
				<view v-for="(item,index) in [1,2,3,4,5,6]" class="cellview">
					<view class="mdclass">
						<image src="../static/header.png" mode="scaleToFill" class="goodpic"></image>
						<view class="goodinfo">
							<text class="goodinfoname">蔬菜色拉蔬菜色拉蔬菜色拉蔬菜色...</text>
							<text class="goodinfoyq">不要辣</text>
							<text class="goodinp">会员价</text>
							<view class="gbtt">
								<view class="vip_price">
									<text class="vpc">100</text>
									<text class="markpc">￥100</text>
								</view>
								<view class="addcart">
									<image src="../static/btn_gray_normal.png" mode="scaleToFill"></image>
									<text>1</text>
									<image src="../static/btn_red_normal.png" mode="scaleToFill"></image>
								</view>
							</view>

						</view>
					</view>


				</view>
				<view class="kbview">

				</view>
			</scroll-view>


			<view class="nogoods" v-else>
				<image src="../static/default_icon_shop.png" mode="scaleToFill"></image>
				<text>购物车没有商品哦</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showcate: true,
				vages: true
			}
		},

		methods: {
			moveHandle() {},
			canclecart() {
				console.log('点击了');
				this.showcate = false
			}
		}
	}
</script>

<style>
	.cart {
		width: 100%;
		height: 100%;
	}

	.cview {
		position: fixed;
		opacity: 0.5;
		background-color: #000;
		width: 100%;
		top: 0rpx;
		bottom: 0rpx;
		right: 0rpx;
		left: 0rpx;
		z-index: 100;
	}

	.bkview {
		height: 60%;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0rpx;
		bottom: calc(var(--window-bottom) + 100rpx);
		right: 0rpx;
		box-sizing: border-box;
		padding: 0rpx 30rpx;
		width: 100%;
		z-index: 200;

	}

	.cart_head {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		justify-content: space-between;
		box-sizing: border-box;
		height: 90rpx;
		border-bottom: 1rpx solid #EBEBEB;
		background-color: #FFFFFF;
		position: relative;
	}

	.cart_del {
		display: flex;
		flex-direction: row;
	}

	.cart_del image {
		width: 32rpx;
		height: 32rpx;
	}

	.cart_del text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}

	.shopct {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		opacity: 1;
	}

	.scall {
		flex: 1;
		width: 100%;
	}

	.cartscroll {
		width: 100%;
		height: 100%;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.cellview {
		width: 100%;
		display: inline-block;
		margin-bottom: 40rpx;
	}

	.mdclass {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.goodpic {
		width: 140rpx;
		height: 140rpx;
	}

	.goodinfo {
		flex: 1 1 0%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

	}

	.goodinfoname {
		font-size: 31rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.goodinfoyq {
		margin-top: 15rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 30rpx;
		color: rgba(153, 153, 153, 1);
	}

	.goodinp {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 80, 114, 1);
		margin-top: 15rpx;
	}

	.gbtt {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 15rpx;
	}

	.vip_price {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.addcart {
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.addcart image {
		width: 60rpx;
		height: 60rpx;
	}

	.addcart text {
		width: 65rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: Arial;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.vip_price {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}

	.vpc {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 80, 114, 1);
	}

	.vpc::before {
		content: '￥';
		font-size: 24rpx;

	}

	.markpc {
		margin-left: 15rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		text-decoration: line-through;
		color: rgba(153, 153, 153, 1);
	}

	.kbview {
		margin-top: 100rpx;
	}

	.nogoods {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.nogoods image {
		width: 350rpx;
		height: 350rpx;

	}

	.nogoods text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		text-align: center;
		margin-top: 20rpx;
	}
</style>
